import React, { ReactElement, useState, useEffect } from 'react'
import { Tabs, Input, Select, Button, message } from 'antd';
import MyRate from './components/MyRate';
import MyUpload from './components/MyUpload';
import HeroAdmin from './components/HeroAdmin';
import Skill from './skill';
import Recommend from './components/Recommend';
import Skin from './components/Skin';
import Equip from './components/Equip'
import SkillAdmin from './SkillAdmin';
import { getCategories } from '@/api/article'
import { addRestHeros } from '@/api/hero'
import styles from './add.less'
import { connect, history } from 'umi'

const { TabPane } = Tabs;
const { Option } = Select;

interface Props {
    heroCard: any,
    changeHeroInfo: Function
}

function Add({ heroCard, changeHeroInfo }: Props): ReactElement {
    const [key, setKey] = useState("1")
    const [list, setList] = useState([])

    useEffect(() => {
        getCategories().then((res: any) => {
            setList(res[0].children)
        })
    }, [])

    // Tab切换
    function callback(key: string) {
        if (heroCard.name !== '') {
            setKey(key)
        } else {
            setKey("1")
            message.warning('请先填写英雄名称~')
        }

    }
    // 英雄定位 选择器
    function handleChange(value: any) {
        changeHeroInfo('cate', value)
        console.log(value);
    }
    return (
        <div>
            <Tabs activeKey={key} onChange={callback} type="card">
                <TabPane tab="基本信息" key="1">
                    <ul className={styles.oul}>
                        <li>
                            <span>
                                英雄名称
                            </span>
                            <div>
                                <Input onChange={(ev) => {
                                    changeHeroInfo("name", ev.target.value)
                                }} />
                            </div>
                        </li>
                        <li>
                            <span>
                                英雄称号
                            </span>
                            <div>
                                <Input onChange={(ev) => {
                                    changeHeroInfo("title", ev.target.value)
                                }} />
                            </div>
                        </li>
                        <li>
                            <span>
                                英雄定位
                            </span>
                            <div>
                                <Select
                                    mode="multiple"
                                    style={{ width: '100%' }}
                                    placeholder="请选择"
                                    defaultValue={[]}
                                    onChange={handleChange}
                                    optionLabelProp="label"
                                >
                                    {
                                        list.map((item: any) => {
                                            return <Option key = { item._id } value={ item._id } label={ item.name }>
                                                <div className="demo-option-label-item">
                                                   { item.name }
                                                </div>
                                            </Option>
                                        })
                                    }

                                </Select>
                                <div className={styles.rate}>
                                    难度：<MyRate type="difficulty"/>
                                </div>
                                <div className={styles.rate}>
                                    技能：<MyRate type="skill"/>
                                </div>
                                <div className={styles.rate}>
                                    攻击：<MyRate type="attack"/>
                                </div>
                                <div className={styles.rate}>
                                    生存：<MyRate type="survive"/>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span>
                                英雄头像
                            </span>
                            <div>
                                <MyUpload type="avatar"/>
                            </div>
                        </li>
                        <li>
                            <span>
                                背景图片
                            </span>
                            <div>
                                <MyUpload type="banner" />
                            </div>
                        </li>

                        <li>
                            <span>
                                图文介绍
                            </span>
                            <div>
                                <MyUpload type="photo" />
                            </div>
                        </li>
                    </ul>
                </TabPane>
                <TabPane tab="英雄皮肤" key="2">
                    <Skin />
                </TabPane>
                <TabPane tab="介绍视频" key="3">
                    <Recommend />
                </TabPane>
                <TabPane tab="出装推荐" key="4">
                    <Equip />
                </TabPane>
                <TabPane tab="使用技巧" key="5">
                    <Skill />
                </TabPane>
                <TabPane tab="技能管理" key="6">
                    <SkillAdmin />
                </TabPane>
                <TabPane tab="英雄关系" key="7">
                    <HeroAdmin />
                </TabPane>
            </Tabs>

            <Button onClick={() => {
                addRestHeros(heroCard).then(res => {
                    history.push("/hero/list")
                })
            }} type="primary">保存</Button>
        </div>
    )
}

export default connect((state: any) => {
    const { heroCard } = state
    return {
        heroCard
    }
}, (dispatch) => {
    return {
        changeHeroInfo(classify: string, value: any) {
            dispatch({ type: "heroCard/changeHeroInfo", classify, value })
        }
    }
})(Add)
